<template>
  <div>
    <!-- 选择设备 -->
    <el-table :data="tableData" style="height: calc(100vh - 15rem)">
      <el-table-column label="设备名称" prop="deviceName" />
      <el-table-column label="设备外码" prop="outCode" />
      <el-table-column label="品牌" prop="brandName" />
      <el-table-column label="设备类型" prop="categoryName" />
      <el-table-column label="设备型号" prop="typeName" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            link
            icon="Pointer"
            @click="handleChange(row)"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <PagingQuery
      :page="page"
      :pageSize="pageSize"
      :total="total"
      @getList="getList"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import { handleApiResponse } from "@/utils/request.js";
import { ListDeviceByOutCodeAndName } from "../../wailsjs/go/api/DeviceApi";

onMounted(() => {
  getList();
});

const emit = defineEmits(["handleBack"]);

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

async function getList(e) {
  if (e) {
    page.value = e.page;
    pageSize.value = e.pageSize;
  }
  handleApiResponse(() =>
    ListDeviceByOutCodeAndName({ page: page.value, pageSize: pageSize.value })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

const handleChange = (row) => {
  emit("handleBack", row);
};
</script>

<style scoped lang="scss">
</style>